import React, { useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector, useHistory } from 'umi';
import { IFI } from '@/utils/interface';
import './_carhome.less';
const Car: React.FC = () => {
  const dispatch = useDispatch();
  const wrap = useRef(null);
  const box = useRef(null);
  const MR = useRef(null);
  //设置开关
  const [flag, setFlag] = useState(false);
  const [moves, setMoves] = useState<number>();
  const [Dis, setDis] = useState<number>(0);
  const history = useHistory();
  //利用 umi的数据管理dva的方法useSelector 拿到数据
  const { IFIS, obj, IMas, IDes } = useSelector((module) => {
    return { ...module.user };
  });
  //派发接口S
  useEffect(() => {
    dispatch({
      type: 'user/IFirst',
    });
    dispatch({
      type: 'user/IDetaile',
    });
  }, []);
  //点击每一个品牌车弹出右侧
  function Mangel(MasterID: any) {
    dispatch({
      type: 'user/IMargin',
      payload: MasterID,
    });
    ((MR.current as unknown) as HTMLDivElement).classList.add('active');
  }
  //开始
  function start(e: React.TouchEvent<HTMLDivElement>) {
    //开关开启
    setFlag(true);
    //声明按下的的距离
    const moves = e.touches[0].clientX;
    setMoves(moves);
  }
  //移动
  function move(e: React.TouchEvent<HTMLDivElement>) {
    if (flag) {
      const dis = e.touches[0].clientX - (moves as number); //移动是按下距离减去移动距离
      //   (MR.current as unknown as HTMLElement).style.transform =`matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, ${dis}, 0, 0, 1)`;
      setDis(dis);
    }
  }
  //结束
  function cancel(e: React.TouchEvent<HTMLDivElement>) {
    setFlag(false);
    if (Dis > 20) {
      if (e.target !== e.currentTarget) {
        ((MR.current as unknown) as HTMLElement).style.right = '-80%';
      }
    }
  }
  //点击右边  楼层
  function jump(e: React.MouseEvent<HTMLDivElement>) {
    const id = (e.target as HTMLDivElement).dataset.id; //当前元素的id
    const dom = document.getElementById(id as string); //获取所有的id
    // console.log((wrap.current as unknown as HTMLDivElement).scrollTop);
    ((wrap.current as unknown) as HTMLDivElement).scrollTop = (dom as HTMLDivElement).offsetTop;
  }
  //点击车系进入详情
  function Godetaile(e: any, value: any) {
    history.push(`/Detaile`, value);
    e.preventDefault();
    e.stopPropagation();
  }
  return (
    <div className="wrap" ref={wrap}>
      <div className="left">
        {Object.keys(obj).map((item) => {
          return (
            <div id={item} ref={box} key={item}>
              <h2>{item}</h2>
              {obj[item].map((value: IFI, index: number) => {
                return (
                  <ul key={index} onClick={() => Mangel(value.MasterID)}>
                    <li>
                      <img src={value.CoverPhoto} alt="" />
                      <span>{value.Name}</span>
                    </li>
                  </ul>
                );
              })}
            </div>
          );
        })}
      </div>

      <div className="right">
        <div>
          <span>#</span>
        </div>
        <div>
          {Object.keys(obj).map((item) => {
            return (
              <div key={item} data-id={item} onClick={jump}>
                <span data-id={item}>{item}</span>
              </div>
            );
          })}
        </div>
      </div>

      {/* 弹出右侧盒子 */}
      <div
        className="Mr"
        ref={MR}
        onTouchStart={start}
        onTouchMove={move}
        onTouchEnd={cancel}
      >
        {IMas &&
          IMas.map((item: any) => {
            return (
              <div>
                <p className="p">{item.GroupName}</p>
                {item.GroupList.map((value: any, index: number) => {
                  return (
                    <div className="In" key={index}>
                      <ul>
                        <li
                          onClick={(e) => {
                            Godetaile(e, value.SerialID);
                          }}
                        >
                          <img src={value.CoverPhoto} alt="" />
                          <div>
                            <p>{value.AliasName}</p>
                            <p>{value.DealerPrice}</p>
                          </div>
                        </li>
                      </ul>
                    </div>
                  );
                })}
              </div>
            );
          })}
      </div>
    </div>
  );
};
export default Car;
